<template>
    <div>
        <div class="list-left">
            <el-input v-model="input" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="rili">
            <el-calendar>
                <template slot="dateCell" slot-scope="{date, data}">
                    <!-- <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p> -->
                    <div class="rili-title"></div>
                </template>
            </el-calendar>
        </div>
    </div>
</template>
<script>
export default{
data(){
    return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
    }
}
}

</script>
<style lang="scss">
.is-selected {
    color: #1989FA;
}

.el-calendar-table .el-calendar-day {
    height: 150px !important;
    padding: 0 !important;
}

.rili {
    .rili-title {
        width: 100%;
        height: 30px;
        background-color: red;
    }
}
.list-left{
    width: 300px;
}
</style>